<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
		<style type="text/css">
			body {
				background-color: rgb(13, 52, 86);
			}

			.number1 {
				text-align: right;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				overflow: hidden;
				height: 40px;
			}

			.span_item {
				display: inline-block;
				color: #fff;
				width: 40px;
				height: 40px;
				font-size: 40px;
				line-height: 40px;
				background-color: rgba(30, 126, 201, 0.35);
				margin-left: 2px;
			}
		</style>
	</head>
	<body>
		<div class="number1">
		</div>
		<script>
			function boxanimation(name) {
				let height = $('.' + name).height();
				let experts = $(".js-l-" + name);
				for (let i = 0; i < experts.length; i++) {
					let expert = experts[i];
					let num = parseInt($(expert).data("show"));
					let scrollTop = height * num;
					$(expert).css("margin-top", 0);
					$(expert).css("width", '40px');
					$(expert).css("text-align", 'center');
					$(expert).css("overflow", 'hidden');
					$(expert).css("font-size", '0');
					$(expert).css("float", 'left');
					$(expert).animate({
						'marginTop': -scrollTop
					}, 1500);
				}
				let width = $("." + name).width() / 2;
				$('.' + name).css('margin-left', '-' + width + 'px');
			};

			function setnumber(name, num) {
				let final_arr = number(num);
				$("." + name).html(dom(final_arr, name));
				boxanimation(name);
			};

			function number(digit) {
				let num_arr = [];
				for (let i = 0; i < digit.length; i++) {
					num_arr.push(digit.charAt(i));
				}
				return num_arr;
			};

			function dom(arr, name) {
				let str = '';
				for (let i = 0; i < arr.length; i++) {
					let dom = ''
					if (parseInt(arr[i]) >= 0) {
						for (var index = 0; index < 10; index++) {
							dom +=
								`<span class="span_item">${index}</span>`
						}
						str += `<div class="l js-l-${name}" data-show=${arr[i]}>${dom}</div>`
					} else {
						str += '<div class="sign-box l"><span>' + arr[i] + '</span></div>';
					}
				}

				return str;
			};
			let pileNum = 9527698600
			setnumber('number1', pileNum + '');
		</script>
	</body>
</html>
